<template>
  <div class="content">
    <div class="content-bottom">
      <div class="formBox" style="margin-bottom: 20px">
        <cusButton type="primary" @onClick="onAdd()" ghost>添加</cusButton>
        <cusButton type="primary" v-if="$store.state.kitchenMode != 'only_kitchen'"  class="mr_10" @onClick="phllTemplate()" v-permission="10">机关食谱模板</cusButton>
      </div>
      <div class="tableBox">
        <cusTable border :loading="loading" :columns="colHidden" :data="data" :bottomClass="['cus-page']">
          <template slot-scope="{ row }" slot="isMo" >
            <i-switch v-model="row.checkStatus" :true-value="1" :false-value="0" @on-change="(value) => {
          changeSwitch(row);
        }
          " :loading="row.loading">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </template>
          <template slot-scope="{ row }" slot="isSystem">
            <div>
              {{ row.isSystemMould == 0 ? "否" : "是 (系统模式不可删除)" }}
            </div>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <cus-button type="text" size="small" :style="{ color: '#1E6FFF', padding: '0 8px' }"
                @onClick="onEdit(row)">
                编辑
              </cus-button>
              <cus-button v-if="$store.state.kitchenMode != 'only_kitchen'" v-permission="20" type="text" size="small" :style="{ color: '#1E6FFF', padding: '0 8px' }"
                @onClick="upHandler(row)">
                {{ row.isReport == 1 ? '重新上报' : '上报' }}
              </cus-button>
              <Poptip confirm transfer placement="left" :title="`是否确认删除该食谱模板 ？`" v-if="row.isSystemMould != 1"
                @on-ok="onDelete(row)">
                <cus-button type="text" size="small" :style="{ color: '#FF4746', padding: '0 8px' }">
                  删除
                </cus-button>
              </Poptip>
            </div>
          </template>


        </cusTable>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page :data="pages" class="mt_10" @pageChange="getMouldListApi"></cus-page>
        </div>
      </div>
    </div>
    <!-- 添加 编辑 食谱模板 -->
    <addTemplate ref="addTemplate"></addTemplate>
    <!-- 机关端食谱模板 -->
    <selectDishes ref="selectDishesRef"></selectDishes>
  </div>
</template>

<script>
import {
  getMouldList,
  updateFoodBookMouldCheckStatus,
  deleteMould,
  reqUpLinkTemplate
} from "@/api/business/dishesModule";
import addTemplate from "./components/addTemplate";
import selectDishes from "./components/selectDishes.vue";
export default {
  components: { addTemplate, selectDishes },
  data() {
    return {
      loading: false,
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "模板名称",
          key: "mouldName",
          // width: 150,
          align: "center",
        },
        {
          title: "食谱类型",
          // width: 150,
          key: "cateringModeName",
          align: "center",
        },
        {
          title: "灶别",
          width: 150,
          key: "boardRateName",
          align: "center",
        },
        {
          title: "劳动强度",
          width: 150,
          key: "labourName",
          align: "center",
        },
        {
          title: "模板来源",
          width: 150,
          key: "source",
          align: "center",
        },
        // {
        //   title: "创建人",
        //   width: 150,
        //   align: "center",
        // },
        // {
        //   title: "创建时间",
        //   width: 150,
        //   align: "center",
        // },
        {
          title: "地区",
          width: 150,
          key: "place",
          align: "center",
        },
        {
          title: "月份",
          width: 150,
          key: "month",
          align: "center",
        },
        {
          title: "是否默认",
          width: 150,
          slot: "isMo",
          align: "center",

        },
        {
          title: "是否系统模式", 
          minWidth: 150,
          slot: "isSystem",
          align: "center",
        },

        {
          title: "操作",
          width: 200,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },

    };
  },
  computed: {
    colHidden: function () {
   return this.columns.filter(function (e) {
     return !e.hidden;  //过滤不用隐藏的列
   });
 },
  },
  mounted() {
    this.getMouldListApi();
  },
  watch: {
  },
  methods: {
    phllTemplate() {
      this.$refs["selectDishesRef"].show()
    },
    // 
    async upHandler(row) {
      const res = await reqUpLinkTemplate({ mouldId: row.mouldId })
      if (res.retCode == 2000) {
        this.$Message.success("上报成功.");
        this.getMouldListApi();
      } else {
        this.$Message.error(res.retMsg);

      }
    },
    // 初始化
    onInit() {
      this.getMouldListApi();
    },
    // 获取列表接口
    getMouldListApi() {
      return new Promise((resolve) => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          mouldType: 'dining'
        };
        this.loading = true;
        getMouldList(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data;
            this.pages.pageTotal = res.total;
            resolve();
          }
        });
      });
    },
    // 添加
    onAdd() {
      this.$refs["addTemplate"].form.mouldId = 0;
      this.$refs["addTemplate"].show();
    },
    // 删除
    onDelete(row) {
      deleteMould({
        mouldId: row.mouldId,
      }).then((res) => {
        if (res.retCode == 2000) {
          this.$Message.success("删除成功.");
          this.getMouldListApi();
          resolve();
        }
      });
    },
    // 编辑
    onEdit(row) {
      this.$refs["addTemplate"].form.mouldId = row.mouldId;
      this.$refs["addTemplate"].show();
    },
    // 切换默认
    changeSwitch(row) {
      row.loading = true;
      updateFoodBookMouldCheckStatus({ mouldId: row.mouldId }).then((res) => {
        this.getMouldListApi();
        if (res.retCode == 2000) {
          this.$Message.success("默认食谱设置成功");
        }
      });
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeHandle, true);
  },
};
</script>
<style scoped>
/deep/.ivu-input-icon {
  height: 40px !important;
  line-height: 40px !important;
}
</style>
<style lang="less" scoped>
.content {

  // padding: 20px;
  &-bottom {
    background: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 2px 0px rgba(153, 182, 199, 0.2);
    padding: 20px;
  }
}

.formBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.mr_20 {
  margin-right: 20px;
}

.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
